<template>
   <div class=" bg-gray-800 rounded-box p-4">
            <div class="card   compact side  ">
                <div class="flex-row items-center space-x-4 card-body">
                    <div>
                         <a :href="'/uid/'+$store.state.user.uid" class="avatar" v-if="$store.state.user.picture"><div class="rounded-full w-14 h-14 shadow ring ring-gray-700 " ><img id="user_picture" :src="$store.state.user.picture"></div></a>
                          <a :href="'/uid/'+$store.state.user.uid" class="avatar placeholder" v-else><div class="bg-neutral-focus text-neutral-content rounded-full w-14 h-14" :style="'background-color:'+ $store.state.user['icon:bgColor']"><span>{{$store.state.user['icon:text']}}</span></div></a> 
                        </div> <div><h2 class="card-title text-gray-300" id="forusername">{{$store.state.user.username}}</h2> 
                        
                        <p  v-if="percent>0" class=" text-blue-400">Uploaded:{{percent}}%</p>
                        <div v-else class=" text-blue-400 uploadBox cursor-pointer">
                             <input @change="changeHandler" data-name="cover" accept="image/*" type="file" />
                            Change Picture</div>
                      
                    </div>
                    <div class="block  lg:hidden flex-0 absolute right-0" @click="showMore">
                        <button class="btn btn-circle">
                           <svg t="1643281299251" class="inline-block w-6 h-6 stroke-current" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="17865" width="200" height="200"><path d="M415.930119 223.790358c0-52.980346 43.003528-95.983874 95.983874-95.983874s95.983874 43.003528 95.983874 95.983874-43.003528 95.983874-95.983874 95.983874S415.930119 276.770704 415.930119 223.790358z" p-id="17866" fill="#ffffff"></path><path d="M415.930119 511.741979c0-52.980346 43.003528-95.983874 95.983874-95.983874s95.983874 43.003528 95.983874 95.983874-43.003528 95.983874-95.983874 95.983874S415.930119 564.722325 415.930119 511.741979z" p-id="17867" fill="#ffffff"></path><path d="M415.930119 799.865614c0-52.980346 43.003528-95.983874 95.983874-95.983874s95.983874 43.003528 95.983874 95.983874-43.003528 95.983874-95.983874 95.983874S415.930119 852.673946 415.930119 799.865614z" p-id="17868" fill="#ffffff"></path></svg>
                           </button>
                    </div>
                  </div>
            </div>
             

            <div class="   lg:block " :class="show==1?'block':'hidden'">  
            <h3 class="sr-only">Categories</h3>
            <ul role="list" class="text-sm font-medium text-gray-300 space-y-4 py-6  border-b border-t border-gray-700 mt-2">
              
               <li>
                <a href="/dashboard/my-likes">
                   <svg   t="1641192768302" class="h-5 w-5 inline-block  " viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="12280" width="200" height="200"><path d="M511.913993 928.016126c-28.898371 0-57.968755-12.729044-86.695112-41.455401L106.30472 564.034268C68.117588 516.38636 31.994625 471.318663 31.994625 383.935495c0-141.223585 114.905426-255.956996 255.956996-255.956996 53.15236 0 104.068537 16.169326 147.244079 46.615824 14.449185 10.148833 17.889467 30.102469 7.740635 44.551655-10.148833 14.449185-30.102469 17.889467-44.551655 7.740635-32.338653-22.877877-70.525785-34.918864-110.433059-34.918864-105.960692 0-191.967747 86.179069-191.967747 191.967747 0 61.409037 20.297665 90.135394 59.172854 138.643373l315.645893 318.742147c15.997312 15.997312 28.898371 22.361834 41.283387 22.533848 12.729044 0.172014 24.942046-6.192508 41.455401-22.705863l316.677977-319.946246c25.974131-28.210314 57.968755-75.858223 57.968755-137.439274 0-105.960692-86.179069-191.967747-191.967747-191.967747-47.991937 0-94.091718 17.889467-129.526625 50.22812l-133.998992 134.171006c-12.55703 12.55703-32.682681 12.55703-45.239711 0s-12.55703-32.682681 0-45.239711l135.031077-135.203091c48.335965-44.207626 109.745003-67.945574 173.734252-67.945574 141.223585 0 255.956996 114.905426 255.956996 255.956996 0 82.394759-41.111372 144.319839-75.686209 181.646901L598.781119 886.388712C569.882748 915.287082 540.984378 928.016126 511.913993 928.016126z" p-id="12281" fill="#dbdbdb"></path></svg>
                   My Likes
                </a>
              </li>

               <!-- <li>
                <a href="/dashboard/bookmarks">
                  <svg t="1641200070037" class="w-5 h-5 inline-block pr-1" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13421" width="200" height="200"><path d="M640 928c-158.4 0-288-129.6-288-288s129.6-288 288-288 288 129.6 288 288-129.6 288-288 288z m0-512c-123.2 0-224 100.8-224 224s100.8 224 224 224 224-100.8 224-224-100.8-224-224-224z" p-id="13422" fill="#e6e6e6"></path><path d="M592 750.4c-4.8 0-11.2-1.6-16-4.8-9.6-6.4-16-16-16-27.2v-156.8c0-11.2 6.4-22.4 16-27.2s22.4-6.4 32 0l136 78.4c9.6 6.4 16 16 16 27.2s-6.4 22.4-16 27.2l-136 80c-4.8 1.6-11.2 3.2-16 3.2z m32-134.4v46.4l40-24-40-22.4zM256 512H128c-17.6 0-32-14.4-32-32s14.4-32 32-32h128c17.6 0 32 14.4 32 32s-14.4 32-32 32zM256 832H128c-17.6 0-32-14.4-32-32s14.4-32 32-32h128c17.6 0 32 14.4 32 32s-14.4 32-32 32zM896 192H128c-17.6 0-32-14.4-32-32s14.4-32 32-32h768c17.6 0 32 14.4 32 32s-14.4 32-32 32z" p-id="13423" fill="#e6e6e6"></path></svg>
                  Bookmarks
                </a>
              </li> -->


              <li>
                <a href="/dashboard/notifications">
                  <svg t="1641200575984" class="w-5 h-5 inline-block pr-1" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="14395" width="200" height="200"><path d="M514.048 75.1616c-242.1248 0-439.1424 197.0176-439.1424 439.1424s197.0176 439.1424 439.1424 439.1424 439.1424-197.0176 439.1424-439.1424-197.0176-439.1424-439.1424-439.1424z m0 816.8448c-208.2816 0-377.7024-169.4208-377.7024-377.7024 0-208.2816 169.4208-377.7024 377.7024-377.7024s377.7024 169.4208 377.7024 377.7024c0 208.2816-169.4208 377.7024-377.7024 377.7024z" fill="#dbdbdb" p-id="14396"></path><path d="M514.048 787.0464c-132.1984 0-243.0464-94.976-267.6224-220.3136l42.8544 21.6064 27.648-54.8864-91.1872-45.9264a31.72864 31.72864 0 0 0-30.8736 1.3824 31.77472 31.77472 0 0 0-14.9504 26.9824c0.8192 183.3984 150.7328 332.5952 334.1824 332.5952 90.9824 0 176.0256-35.8912 239.4624-101.12l-44.032-42.8544c-51.8656 53.248-121.2416 82.5344-195.4816 82.5344zM514.048 180.1728c-87.1936 0-169.6768 33.3824-232.2944 93.952l42.7008 44.1856c51.0976-49.4592 118.4256-76.6976 189.5936-76.6976 133.0688 0 244.5312 96.2048 268.1344 222.8224l-56.3712-25.7536-25.5488 55.8592 103.0144 47.104c4.2496 1.9968 8.8064 2.9696 13.312 2.9696 5.9392 0 11.8784-1.6896 17.0496-5.0688a31.3344 31.3344 0 0 0 14.4896-26.7264c-0.7168-183.4496-150.6304-332.6464-334.08-332.6464z" fill="#dbdbdb" p-id="14397"></path><path d="M406.6816 548.3008v61.44h71.2192v32.3072h61.44v-32.3072h71.168v-61.44h-71.168v-31.232h71.168v-61.44h-44.9024l30.9248-37.1712-47.2576-39.2704-42.9568 51.6608-45.7216-49.8688-45.312 41.5232 30.4128 33.1264h-39.0144v61.44h71.2192v31.232z" fill="#dbdbdb" p-id="14398"></path></svg>
                  Notifications
                </a>
              </li>

              

              <li>
                <a href="/dashboard/posts">
                  <svg t="1641200676458" class="w-5 h-5 inline-block pr-1" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="16250" width="200" height="200"><path d="M170.666667 896v0.021333c-0.426667 0.021333 0 0.426667 0 2.069334C170.666667 896.426667 170.24 896 170.666667 896z m682.666666-607.488V896H170.666667V170.666667h554.666666V128H170.474667C147.178667 128 128 146.176 128 168.576v729.514667C128 920.448 147.114667 938.666667 170.666667 938.666667h682.666666c23.68 0 42.666667-18.218667 42.666667-40.661334v-609.493333h-42.666667zM618.474667 519.701333a21.312 21.312 0 0 0 29.226666-7.530666l245.333334-416a21.354667 21.354667 0 0 0-36.757334-21.674667l-245.333333 416a21.333333 21.333333 0 0 0 7.530667 29.226667zM298.666667 384.021333h298.666666v-42.666666H298.666667v42.666666z m0 128h170.666666v-42.666666h-170.666666v42.666666z" fill="#dbdbdb" p-id="16251"></path></svg>
                  Posts
                </a>
              </li>

               <li>
                <a :href="'/uid/'+$store.state.user.uid">
                  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="inline-block w-5 h-5   stroke-current">        
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
                  </svg>
                  Your Profile
                </a>
              </li>

              

              
            </ul>
             <div class="text-gray-400 mt-5 mb-3">Single Sign-on Services</div>
            <ul role="list" class="text-sm font-medium text-gray-300 space-y-4 pb-6  border-b  border-gray-700  ">
              

              <li>
                <a class=" cursor-pointer text-blue-400"  href="/auth/facebook">
                   Click here to associate with Facebook
                </a>
              </li>
              <li>
                <a class=" cursor-pointer text-blue-400"  href="/auth/google">
                  Click here to associate with Google
                </a>
              </li>
            </ul>
            
            <div class="text-gray-400 mt-5 mb-3">Settings</div>
            <ul role="list" class="text-sm font-medium text-gray-300 space-y-4 pb-6   ">
              

              <li>
                <label class=" cursor-pointer" for="my-modal-editProfile">
                   Edit Profile
                </label>
              </li>

             
             
                <li>
                <label class=" cursor-pointer" for="my-modal-updateUsername"  >
                  Change Username
                </label>
              </li>
              <li>
                <a href="/register/complete">
                  Change Email
                </a>
              </li>

              <li>
                <label  class=" cursor-pointer" for="my-modal-editPassword"   >
                  Change Password
                </label>
              </li>
               <li>
                 
                <label  class=" cursor-pointer text-red-600" for="my-modal-deleteAccount"   >
                   Delete Account
                </label>
              </li>
            </ul>
            </div>
            <!--更新用户名 -->
            <input type="checkbox" id="my-modal-updateUsername" class="modal-toggle"> 
            <div class="modal">
                <div class="modal-box">
                    <div>
                        <form class="form-horizontal edit-form">
                               <div class="form-control">
                                <label class="label">
                                    <span class="label-text">Username</span>
                                </label> 
                                <input type="text" id="updateUser-username" :value="$store.state.user.username" placeholder="username" class="input input-bordered">
                                </div>


                                <div class="form-control">
                                <label class="label">
                                    <span class="label-text">Password</span>
                                </label> 
                                <input type="password" id="updateUser-password" placeholder="Password" class="input input-bordered">
                                </div>
                                
 
                            </form>
                    </div>
                    <div class="modal-action">
                    <label @click="changeUsername" class="btn btn-primary">Change Username</label> 
                    <label for="my-modal-updateUsername" class="btn">Close</label>
                    </div>
                </div>
            </div>
<!--  更新用户名-->

  <!--更新用户名 -->
            <input type="checkbox" id="my-modal-deleteAccount" class="modal-toggle"> 
            <div class="modal">
                <div class="modal-box">
                    <div>
                        <form class="form-horizontal edit-form">
                                <div>
                                   <p> Are you sure you want to anonymize your posts and delete your account?
This action is irreversible and you will not be able to recover any of your data</p>

<p class="mt-3">Enter your password to confirm that you wish to destroy this account.</p>
                                </div>


                                <div class="form-control">
                                
                                <input type="password" id="delete-password" placeholder="Password" class="input input-bordered">
                                </div>
                                
 
                            </form>
                    </div>
                    <div class="modal-action">
                    <label @click="deleteAccount" class="btn btn-primary">Confirm</label> 
                    <label for="my-modal-deleteAccount" class="btn">Close</label>
                    </div>
                </div>
            </div>
<!--  删除一个账户-->


  <!--更新密码 -->
            <input type="checkbox" id="my-modal-editPassword" class="modal-toggle"> 
            <div class="modal">
                <div class="modal-box">
                    <div>
                        <form class="form-horizontal edit-form">
                               <div class="form-control">
                                <label class="label">
                                    <span class="label-text">Current Password</span>
                                </label> 
                                <input type="password" id="inputCurrentPassword"  placeholder="Current Password" class="input input-bordered">
                                </div>


                                <div class="form-control">
                                <label class="label">
                                    <span class="label-text">Password</span>
                                </label> 
                                <input type="password" id="inputNewPassword" placeholder="Password" class="input input-bordered">
                                </div>

                                  <div class="form-control">
                                <label class="label">
                                    <span class="label-text">Confirm Password</span>
                                </label> 
                                <input type="password" id="inputNewPasswordAgain" placeholder="Confirm Password" class="input input-bordered">
                                </div>
                                
 
                            </form>
                    </div>
                    <div class="modal-action">
                    <label @click="editPassword" class="btn btn-primary"> Change Password</label> 
                    <label for="my-modal-editPassword" class="btn">Close</label>
                    </div>
                </div>
            </div>
<!--  更新密码 -->

 <!--更新基本信息 -->
            <input type="checkbox" id="my-modal-editProfile" class="modal-toggle"> 
            <div class="modal">
                <div class="modal-box">
                    <div class=" max-h-full overflow-y-auto overflow-x-hidden">
                        <form class="form-horizontal edit-form">
                               <div class="form-control">
                                <label class="label">
                                    <span class="label-text">Full Name</span>
                                </label> 
                                <input type="text" id="fullname" :value="$store.state.user.fullname"  placeholder="Full Name" class="input input-bordered">
                                </div>

                                <div class="form-control">
                                <label class="label">
                                    <span class="label-text">Website</span>
                                </label> 
                               <input type="text" id="website"  :value="$store.state.user.website"  placeholder="http://..." class="input input-bordered">
                               </div>
                                 <div class="form-control">
                                <label class="label">
                                    <span class="label-text">Location</span>
                                </label> 
                               <input type="text" id="location" :value="$store.state.user.location"  placeholder="location" class="input input-bordered">
                               </div>
                               <div class="form-control">
                                <label class="label">
                                    <span class="label-text">Birthday</span>
                                </label> 
                               <input type="date" id="birthday" :value="$store.state.user.birthday"  placeholder="mm/dd/yyyy" class="input input-bordered">
                               </div>

                               <div class="form-control">
                                <label class="label">
                                    <span class="label-text">About me </span>
                                </label> 
                                <textarea  id="aboutme" maxlength="1000" class="textarea h-24 textarea-bordered" placeholder="About Me..." :value="$store.state.user.aboutme"></textarea>
                                </div>

                                <div class="form-control">
                                <label class="label">
                                    <span class="label-text">Signature  </span>
                                </label> 
                                <textarea  id="signature" maxlength="55" class="textarea h-24 textarea-bordered" placeholder="Signature..."  :value="$store.state.user.signature" ></textarea>
                                </div>
                                
 
                            </form>
                    </div>
                    <div class="modal-action">
                    <label @click="editProfile" class="btn btn-primary">Save Changes</label> 
                    <label for="my-modal-editProfile" class="btn">Close</label>
                    </div>
                </div>
            </div>
<!--  更新基本信息-->


     </div>
</template>

 <script>
 import * as qiniu from 'qiniu-js';
export default {
   props: {
   
  },
 data() {
    return {
        percent:0,
        show:0,
    }
    
},

async mounted() {
       
  },
 

 methods: {
       showMore(){
         this.show=this.show==1?0:1;
       },
    //  deleteAccount 删除账户
       async deleteAccount(){
            // https://community.nodebb.org/api/v3/users/{uid}/account
                var password = document.getElementById("delete-password").value;
                 let post = {
                    password:password
                }
                let res = await  this.$axios.post("snogogo_nuxt/user/delete_account",post)
                if(res.code>0){
                    this.$tools.alert("error",res.code+":"+res.msg)
                    return;
                }
                document.getElementById("my-modal-deleteAccount").checked = false
                this.$tools.alert("success", res.msg)
        },
    //  changeUsername
       async  changeUsername(){
                var username = document.getElementById("updateUser-username").value;
                var password = document.getElementById("updateUser-password").value;
                 let post = {
                    username:username,
                    password:password
                }
                 //this.$tools.showToast('Loading...', 10000)
                let res = await  this.$axios.post("snogogo_nuxt/user/update_user_name",post,{
                    withCredentials: true, // 跨域请求时发送Cookie
                    timeout: 6000, // 请求超时
                })
                 //this.$tools.hideToast();
                // //console.log("res:",res);
                if(res.code>0){
                    this.$tools.alert("error",res.code+":"+res.msg)
                    return;
                }
                document.getElementById("my-modal-updateUsername").checked = false
                this.$tools.alert("success", res.msg)
                        
        },
        //  editProfile
       async  editProfile(){
          
                 let post = {
                    fullname:document.getElementById("fullname").value,
                    website:document.getElementById("website").value,
                    location:document.getElementById("location").value,
                    birthday:document.getElementById("birthday").value,
                    signature:document.getElementById("signature").value,
                    aboutme:document.getElementById("aboutme").value
                }
                 //this.$tools.showToast('Loading...', 10000)
                let res = await  this.$axios.post("snogogo_nuxt/user/update_account",post)
                  //this.$tools.hideToast();
                // //console.log("res:",res);
                if(res.code>0){
                    this.$tools.alert("error",res.code+":"+res.msg)
                    return;
                }
                document.getElementById("my-modal-editProfile").checked = false
                this.$tools.alert("success", res.msg)
                        
        },
        
        //更新密码
        async  editPassword(){
                var inputCurrentPassword = document.getElementById("inputCurrentPassword").value;
                var inputNewPassword = document.getElementById("inputNewPassword").value;
                var inputNewPasswordAgain = document.getElementById("inputNewPasswordAgain").value;
                // if(inputNewPassword.length<7){
                //      this.$tools.alert("error","Weak password.")
                //     return;
                    
                // }

                if(inputNewPassword.length<7){
                     this.$tools.alert("error","The password entered is too short, please pick a different password.")
                    return;
                    
                }
                if(inputNewPassword!=inputNewPasswordAgain){
                    this.$tools.alert("error","Passwords must match!")
                    return;
                }
                let post = {
                    currentPassword:inputCurrentPassword,
                    newPassword:inputNewPassword,
                }
                 //this.$tools.showToast('Loading...', 10000)
                let res = await  this.$axios.post("snogogo_nuxt/user/update_password",post)
                 //this.$tools.hideToast();
                // //console.log("res:",res);
                if(res.code>0){
                    this.$tools.alert("error",res.code+":"+res.msg)
                    return;
                }
                document.getElementById("my-modal-updateUsername").checked = false
                this.$tools.alert("success", res.msg)
                document.getElementById("forusername").innerHTML=username ;        
        },

      upload(file,key,uploadName){
        //console.log("file:",file,"key:",key,"uploadName:",uploadName);
        var _this = this;
        const token = this.qiniuToken; //从服务器拿的并存在本地data里
        const putExtra = {
            fname: 'test.png',
            params: {},
            mimeType: ['image/png', 'image/jpeg', 'image/gif'],
        };
        const config = {
            useCdnDomain: true, //使用cdn加速
        };
        const observable = qiniu.upload(file, key, token, putExtra, config);
        //console.log("observable:",observable)
        observable.subscribe({
            next: (result) => {
            // 主要用来展示进度
            console.warn(result);
       
            this.percent =  parseInt( result.total.percent)
            
            },
            error: (e) => {
                
                this.$tools.alert("上传图片失败",e.message);
                this.percent = 0;
            },
            complete: (res) => {
                  let  url = "https://img.snogogo.com/"+res.key;   
                  _this.updateUserPicture(url,res.key)
            },
        });
     },
    async changeHandler(e) {
      let _this = this;
      const files = e.target.files ;
      //console.log("type:",file," e.srcElement.dataset:", e.srcElement.dataset.name);
      if(!this.qiniuToken){
            let res = await  this.$axios.get("snogogo_nuxt/api/uploadToken");
            if(res.code>0){
                this.$tools.alert("error",res.code+":"+res.msg);
                return;
            }
            this.qiniuToken = res.data;
      }
    for (var len=0;len<files.length;len++){
          var file = files[len];
          let key = "userpicture/"+this.$store.state.user.uid + "/"+Date.parse(new Date());;
          this.upload(file,key)
      }
      
    },
    async  updateUserPicture(url,key){
       //console.log("url:",url)
       let res = await    this.$axios.post("snogogo_nuxt/user/update_picture",{picture:key});
       this.percent = 0;
       if(res.code>0){
            if(res.code>0){
                this.$tools.alert("error",res.code+":"+res.msg);
                return;
            }
       }
       let picture =  url+"?imageView2/1/w/120/h/120";
       document.getElementById("user_picture").src=picture
       this.$tools.alert("success", res.msg)
   },

   },
  
}
</script>
